<template>
    <div class="createPost-container">

        <el-form ref="schemeForm" :rules="rules" :model="schemeForm" class="form-container">
            <div class="createPost-main-container">
                <el-row>
                    <el-col :span="21">
                        <el-form-item style="margin-bottom: 40px;" prop="title">
                            <MDinput name="title" v-model="schemeForm.title" required :maxlength="100">
                                标题
                            </MDinput>
                            <span v-show="schemeForm.title.length>=26" class='title-prompt'>文字太长可能会被隐藏</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item prop="intro" style="margin-bottom: 40px;"  label="摘要:">
                            <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="schemeForm.intro">
                            </el-input>
                            <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item prop="cover_file_id" style="margin-bottom: 40px;" label="封面图片:">
                            <upload-image :file-list="uploadFiles" @upload-success="uploadSuccess" @remove-file="removeFile"></upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <div class="editor-container">
                            <Tinymce :height=400 ref="editor" v-model="schemeForm.artcontent"></Tinymce>
                        </div>
                    </el-col>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('schemeForm', 0)" :loading="subSaveLoading">保存</el-button>
                            <el-button type="success" @click="submitForm('schemeForm', 1)" :loading="subPushLoading">立即发布</el-button>
                            <el-button @click="$router.back()">返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>
<script>
  import MDinput from '@/components/MDinput'
  import UploadImage from '@/components/UploadImage'
  import Tinymce from '@/components/Tinymce'
  import schemeApi from '../../../api/scheme'
//  import {parseFilePath} from '../../../utils/common'
  export default {
    components: {
      MDinput,
      UploadImage,
      Tinymce
    },
    data () {
      return {
        schemeForm: {
          title: '',
          intro: '',
          cover_file_id: '',
          artcontent: '',
          status: 0,
          type: 1
        },
        rules: {
          title: [
            {required: true, message: '请输入文章标题', trigger: 'blur'}
          ],
          intro: [
            {required: true, message: '请输入文章摘要', trigger: 'blur'}
          ],
          cover_file_id: [
            {required: true, message: '请上传封面图', trigger: 'blur'}
          ]
        },
        subSaveLoading: false,
        subPushLoading: false,
        uploadFiles: []
      }
    },
    computed: {
      contentShortLength () {
        return this.schemeForm.intro.length
      }
    },
    created () {
      const self = this
      switch (this.$route.name) {
        case 'CaseManagerAdd':
          self.schemeForm.type = 1
          break
        case 'CaseManagerEdit':
          self.schemeForm.type = 1
          break
        case 'SolutionManagerAdd':
          self.schemeForm.type = 0
          break
        case 'SolutionManagerEdit':
          self.schemeForm.type = 0
          break
      }
    },
    methods: {
      submitForm (formName, status) {
        const self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.schemeForm.status = status
            self.postScheme()
          } else {
            return false
          }
        })
      },
      postScheme () {
        const id = this.$route.params.id
        const self = this
        if (self.schemeForm.status === 0) {
          self.subSaveLoading = true
        } else {
          self.subPushLoading = true
        }
        if (id) {
          schemeApi.updateScheme(id, self.schemeForm).then(response => {
            self.hideLoading()
            self.$message.success('操作成功')
            self.$router.back()
          }, response => {
            self.hideLoading()
            self.$message.error(response.data.message)
          })
        } else {
          schemeApi.addScheme(self.schemeForm).then(response => {
            self.hideLoading()
            self.$message.success('操作成功')
            self.$router.back()
          }, response => {
            self.hideLoading()
            self.$message.error(response.data.message)
          })
        }
      },
      hideLoading () {
        if (this.subSaveLoading) {
          this.subSaveLoading = false
        }
        if (this.subPushLoading) {
          this.subPushLoading = false
        }
      },
      uploadSuccess (data) {
        this.schemeForm.cover_file_id = data.data.id
      },
      removeFile (data) {
        if (this.schemeForm.cover_file_id === data.data.id) {
          this.schemeForm.cover_file_id = ''
        }
      }
    }
  }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    @import "../../../assets/css/form.scss";

</style>